<template>
	<view class="bgw">
		  <view class="cu-list menu-avatar">
		  	<view class="cu-item">
		  		<view class="cu-avatar round lg" :style="'background-image:url('+data.logo+'?imageView2/2/w/80);'"></view>
		  		<view class="content">
		  			<view class="text-grey">{{data.store_name}}</view>
		  			<view class="text-gray text-sm flex">
		  				<view class="text-cut">
		  					<text class="cuIcon-infofill text-green margin-right-xs"></text>
		  					 {{data.shop_name}}
		  				</view> </view>
		  		</view>
		  		 
		  	</view>
			</view>
			<form>
				<view class="cu-form-group margin-top">
					<view class="title">费用类型</view>
					<picker @change="PickerChange" :value="index" :range="picker">
						<view class="picker">
							{{index>-1?picker[index]:'请选择'}}
						</view>
					</picker>
				</view>
				
				<view class="cu-form-group margin-top">
					<view class="title">消费金额</view>
					<input style="    font-size: 44rpx;" @input="setmoney"  placeholder="请输入金额" type="digit"></input>
				</view>
				
				<view class="cu-form-group margin-top">
					<view class="title">备注信息</view>
					<textarea  @input="setbody"  placeholder="备注信息" type="text"></textarea>
				</view>
			</form>
			
			<view class="padding-xl">
				 
				<button @click="pay" class="cu-btn block bg-blue margin-tb-sm lg">
					<text class="cuIcon-loading2 cuIconfont-spin" v-if="loadding"></text> 确认支付</button>
	 
			</view>
		  	
	</view>
</template>

<script>
import beeApp from '../../beeApp.js';
export default {
	data() {
		return {
			 data:{},
			 loadding:0,
			 index: -1,
			 money:"",
			 body:"",
			 order_type:'',
			 picker: [],
			 shop_id:0,
		};
	},
	onShareAppMessage(res) {
	    
	  },
	  onPullDownRefresh() {
		  this.loadding=0;
		  
		  this.loadData();
	  	 wx.stopPullDownRefresh();
	  },
	onLoad(query) {
			const url = decodeURIComponent(query.q) // 获取到二维码原始链接内容
			// console.log("query:",query,option);
			// var url ="https://www.chenyu2022.com/money?shop_id=357";
			// console.log("shop_id:",this.getQueryVariable(url,"shop_id"));
			this.shop_id = this.getQueryVariable(url,"shop_id");
			// this.shop_id =356;
			console.log("url:",url,"this.shop_id:",this.shop_id)
			this.loadData();
		},
		
		methods: {
			setmoney(e){
				console.log("e:",e)
			  	this.money = e.detail.value
			},
			setbody(e){
				console.log("e:",e)
			  	this.body = e.detail.value
			},
			
			 getQueryVariable(url="",variable)
			{
				   let p = url.split("?")
			       var query = p[1];
			       var vars = query.split("&");
			       for (var i=0;i<vars.length;i++) {
			               var pair = vars[i].split("=");
			               if(pair[0] == variable){return pair[1];}
			       }
			       return(false);
			},
			loadData(){
				this.getopenid();
					var that = this;
					beeApp.api("apiv2/pay/community_fee_type_list", {
						shop_id:this.shop_id
					}, function (res) {
					 if(res.code!=200){
						 beeApp.alert(res.msg);
						 return;
					 }
					that.data= res.data;
					for(var i in res.data.list ){
						that.picker.push(res.data.list[i].cost_type);
					}
					  
					
					})
			},
			getopenid(){
				var openid =  uni.getStorageSync("openid");
				if(openid ){
					this.openid =openid;
					return;
				} 
				var that = this;
				wx.login({
				  success (res) {
					  console.log("res:",res);
				    if (res.code) {
					  
					   beeApp.api("/api/user/getOpendId",{
						    code:res.code
					   },(resD)=>{
							console.log(resD);
							if(resD.code!=200){
								 beeApp.alert('获取openId失败, 请下拉刷新重试' );
								 return;
							}
							that.openid = resD.data.openid;
							uni.setStorageSync("openid",resD.data.openid);
					   })
				    } else {
				      beeApp.alert('登录失败！' + res.errMsg)
				    }
				  }
				})
			},
			pay:function(type){
				if(this.order_type==""){
					beeApp.alert("请选择费用类型"); 
					return;
				}
				
			  if(this.money==""){
				 beeApp.alert("请输入金额"); 
				 return;
			  }
			  
			  
			            
			  if(this.loadding==1){
				  return;
			  }
			  var that = this;
				
			  
			  this.loadding=1;
			  
			  beeApp.api("/api/pay/payonline",{
				  openid:this.openid,
				  shop_id:this.shop_id,
				  code: this.code,
				  method:"POST",
				  body:this.body,
				  order_amount:this.money,
				  title:this.picker[this.index],
				  order_type:this.order_type
			  },function(res){
				  
			      if(res.code!=200){
					 that.loadding=0;
			        beeApp.alert(res.msg);
			        return;
			      }
			      beeApp.pay(res.data.order_sn,(res)=>{
					  that.loadding=0;
					 //  uni.showModal({
						// 	title: '支付成功',
						// 	content: '恭喜您，缴费成功！'
						// });
					uni.navigateTo({
						url:"/pages/index/paySuc?title="+that.money
					})
					 // beeApp.open()
				  },(res)=>{
					  that.loadding=0;
				  });
			  });
			  // console.log(bill_entry_ids);
			},
			PickerChange(e) {
				this.index = e.detail.value
				for(var i in this.data.list ){
					if(i==this.index){
						this.order_type = this.data.list[i].code
					}
					
				}
				 
			},
			
		}
			   
	
	
};
</script>

<style>

	.menu-list {
		box-shadow: 0px 3px 0px #eee;
		width: 96%;
		border-radius: 5%;
		margin-top: -70upx;
		position: absolute;
		left: 2%;
		white-space: nowrap;
		background-color: #fff;
		padding: 10upx 0;
	}

	.least-recently-used {
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.least-recently-used .used-item {
		display: inline-block;
		width: 25%;
		text-align: center;
		padding: 15upx 0;
	}

	.least-recently-used .used-item image {
		width: 50upx;
		height: 50upx;
	}

	.used-item3 {
		display: inline-block;
		width: 25%;
		text-align: center;
		padding: 15upx 0;

	}

	.used-item3 image {
		width: 80upx;
		height: 80upx;
	}

	.aui-row-title {
		padding: 20rpx 0px 0px 40rpx;
	}

	.notiBox {
		box-shadow: 0px 3px 0px #eee;
		border-radius: 5%;
		border: 1px solid #eee;
		margin: 10px;
	}

	.screen-swiper {
		min-height: 300upx;
		height: 300upx;
	}

	.least-recently-used .used-item2 {
		display: inline-block;
		width: 80%;
		box-shadow: 0px 3px 0px #eee;
		border-radius: 5%;
		border: 1px solid #eee;

		margin: 0 5px;

	}

	.least-recently-used .used-item2 image {
		width: 100upx;
	}

	.used-item2 image {
		width: 100upx;
	}


	.footer .l-line,
	.footer .r-line,
	.footer .footer-content {
		float: left;
		color: #888;
	}

	.footer {
		width: 560upx;
		margin: 0 auto;
		margin-top: 40upx;
	}

	.footer .l-line,
	.footer .r-line {
		width: 68upx;
		border-bottom: 1px solid #888;
		margin-top: 60upx;
	}

	.footer-content {
		padding: 40upx 10upx;
	}
</style>
